{% extends "base.html" %}
{% load static %}
{% load common_filters %}

{% block title %}
    Teacher Dashboard | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
  {{ block.super }}
  <style type="text/css">
  /* Align vertically a column */
  .v-align {
      vertical-align: middle !important;
  }
  div.col-sm-3 a.active {
    background:#1ca59e;
  }
  </style>
{% endblock stylesheets %}

{% block content %}

  {% include "_teacher_sidebar.html" %}

  <!--main content start-->
  <section id="main-content">

     <section class="wrapper">

        <div class="table-agile-info">
           <div class="panel panel-default">

              <div class="panel-heading">
                 {{ view.section_title }}
              </div>

              {% if not view.is_slug_view %}
                {% include "_course_tabs.html" %}
              {% endif %}

              <div class="row w3-res-tb">
                 <div class="col-sm-5 m-b-xs">
                 </div>

                 <div class="col-sm-4">
                 </div>

                 <div class="col-sm-3">
                    {% include "_search_form.html" %}
                 </div>
              </div>

              {% if user_list %}
              <div class="table-responsive">
                {% if view.is_slug_view %}
                 <table class="table b-t b-light">
                {% else %}
                 <table class="table table-striped b-t b-light">
                {% endif %}
                    <thead>
                       <tr>
                        <th>Username</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        {% if view.is_slug_view %}
                        <th>Class</th>
                        {% endif %}
                       </tr>
                    </thead>
                    <tbody>
                      {% for user in user_list %}

                          {% if view.is_slug_view %} <!-- slug view -->
                            {% with courses=user|get_student_semester_class:view.course_slug %}
                              {% for course in courses %}
                                <tr>
                                {% if forloop.first %}
                                  <td class="v-align" rowspan="{{ courses|length }}">
                                    <a href="{% url "course:student_detail" user.pk 0 view.course_slug %}">{{user.username}}</a>
                                  </td>
                                  <td class="v-align" rowspan="{{ courses|length }}">{{ user.first_name }}</td>
                                  <td class="v-align" rowspan="{{ courses|length }}">{{ user.last_name }}</td>
                                  <td class="v-align" rowspan="{{ courses|length }}">{{ user.email }}</td>
                                  <td>{{ course.semester }}{{ course.classroom }}</td>
                                {% else %}
                                  <td>{{ course.semester }}{{ course.classroom }}</td>
                                {% endif %}
                                </tr>
                              {% endfor %}
                            {% endwith %}

                          {% else %}<!-- course view -->

                           <tr>
                              <td><a href="{% url "course:student_detail" user.pk view.course_id view.course_slug %}">{{user.username}}</a></td>
                              <td>{{user.first_name}}</td>
                              <td>{{user.last_name}}</td>
                              <td>{{user.email}}</td>
                          </tr>

                          {% endif %}
                      {% endfor %}
                    </tbody>
                 </table>

              </div>

              <footer class="panel-footer">
                    {% include "_pagination.html" %}
              </footer>

              {% else %}
                <div class="well">No students yet.</label>
              {% endif %}

           </div>
        </div>
     </section>

  </section>
  <!--main content end-->

  {% include "_footer.html" %}

{% endblock content %}

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "laioffer/js/csrf.js" %}"></script>
    <script type="text/javascript" src="{% static "laioffer/js/rest/task.js" %}"></script>
    <script type="text/javascript" src="{% static "laioffer/js/task.js" %}"></script>
{% endblock javascripts %}
